import { useState, useEffect } from "react";
import { getTypeOneList, getGoodList } from "../tools/ajax";
import "./home.scss";
import {NavLink} from 'react-router-dom'
import Banner from "../../components/banner/banner";
import Searchs from "../../components/searchs/searchs";
import axios from "axios";
function Home() {
  // 导航数据
  // let [list, setList] = useState([]);
  // async function aa() {
  //   let res = await getTypeOneList();
  //   list = res.data;
  //   setList([...list].splice(0, 9));
  //   console.log(list);
  // }
  // 商品列表
  let [lists, setLists] = useState([]);
  let [page,setPage] = useState(1)
  async function bb() {
    let res = await getGoodList({page:page});
    lists.push(...res.data) ;
    setLists([...lists]);
    console.log(lists, "商品列表");
  }
  document.addEventListener("scroll", function () {
    if (window.pageYOffset + window.innerHeight >= document.body.offsetHeight) {
      console.log("触底");
      setPage(page + 1);
      bb();
    }
  });
  useEffect(() => {
    // aa();
    bb();
  }, []);
  //导航渲染
  return (
    <div className="home">
      {/* <ul className="uls">
        {list.map((item,i) => {
          return (
            <NavLink to="/search">
            <li className="lis" key={i}>
              <a className="as">{item}</a>
            </li>
            </NavLink>
          );
        })}
      </ul> */}
      <Searchs></Searchs>
      <Banner></Banner>
      <ul className="shoplist">
        {lists.map((item,i) => {
          return(
            <NavLink to= "/title" state={item.Id}>
          <li className="shopBox" key={i}>
            <div className="Img">
            <img src={item.imageUrl} alt="" />
            </div>
            <h3>{item.title}</h3>
            <p>
            <span>{ "￥" + item.priceStr }</span>
            <span className="mack"></span>
          </p>
          </li>
          </NavLink>
          )
        })}
      </ul>
    </div>
  );
}
export default Home;
